<template>
	<view class="container">
		<u--form ref="queryForm" :model="query" label-width="160rpx">
		  <u-form-item label="叫车模式" prop="">
		    <uni-data-select
		    	:clear="false"
		    	v-model="callMode"
		    	:localdata="range"
		    	@change="change"
		    ></uni-data-select>
		  </u-form-item>
			<view v-if="callMode === 0">
				<u-form-item label="空车类型" prop="">
				  <uni-data-select
				  ></uni-data-select>
				</u-form-item>
				<u-form-item label="叫车点位" prop="">
				  <u--input
				  	placeholder="请输入/扫描" 
				  	v-model.trim="query.mark" 
				  	suffixIcon="scan"
				  	suffixIconStyle="font-size: 68rpx"
				  	style="flex: 1;"
				  >
				  </u--input>
				</u-form-item>
			</view>
			<view v-else-if="callMode === 1">
				<u-form-item label="载具码" prop="">
				  <u--input
				  	placeholder="请输入/扫描" 
				  	v-model.trim="query.containerCode" 
				  	suffixIcon="scan"
				  	suffixIconStyle="font-size: 68rpx"
				  	style="flex: 1;"
						@confirm="getContainerInfo"
						:disabled="scanFlag"
				  >
				  </u--input>
				</u-form-item>
				<u-form-item label="起始点位" prop="">
					<view style="position: relative;flex: 1;">
						<u--input
							placeholder="请扫描或选择"
							v-model="query.from"
							clearable
							style="width: 100% - 160rpx;"
							:disabled="scanFlag"
							@focus="focusInput"
							@blur="blurInput"
							@change="inputChange"
							@clear="clearInput"
						>
						</u--input>
						<view v-if="visible" style="width: 100%;position: absolute; overflow-y: scroll;max-height: 360rpx;border: 1rpx solid #dadbde;background-color: #fff;z-index: 999;border-radius: 10rpx;box-sizing: border-box;padding: 15rpx 0;">
							<view v-for="(item, index) in fromList"
								:key="index"
								class="people-item"
								@click="clickItem(item)"
							>
								{{ item.text }}
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="任务类型" prop="">
				  <uni-data-select
						v-model="query.missionType"
						:localdata="missionTypeList"
						@change="missionChange"
						:clear="false"
					></uni-data-select>
				</u-form-item>
				<u-form-item :label="getLabel(query.missionType)" prop="">
				  <uni-data-select
						v-model="query.to"
						:localdata="query.missionType === 'warehouse' ? toWarehouseList: toStieList"
						@change="destinationChange"
				  ></uni-data-select>
				</u-form-item>
			</view>
			<view v-else-if="callMode === 2">
				<u-form-item label="起始点位" prop="">
				  <uni-data-select
				  ></uni-data-select>
				</u-form-item>
				<u-form-item label="终点点位" prop="">
				  <uni-data-select
				  ></uni-data-select>
				</u-form-item>
			</view>
		</u--form>
		<u-toast ref="uToast"></u-toast>
		<view class="commonButton" v-if="callMode === 0">
			<u-button type="primary" @click="emptyConfirm">确认叫车</u-button>
		</view>
		<view class="commonButton" v-else-if="callMode === 1">
			<u-button type="warning" @click="resetPointToPoint">重置</u-button>
			<u-button type="error" :disabled="!scanFlag" @click="unBind">解绑</u-button>
			<u-button type="primary" @click="pointConfirm">{{ scanFlag === true ? '确认叫车' : '绑定' }}</u-button>
		</view>
		<view class="commonButton" v-else>
			<u-button type="primary" @click="trayConfirm">确认叫车</u-button>
		</view>
	</view>
</template>

<script>
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	import uniDataSelect from '../../../node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue'
	import { emptyConfirmAPI, pointConfirmAPI, trayConfirmAPI, getEmptyTypeAPI, getFromListAPI, getToListAPI, threeMethodAPI, getStationAPI } from '@/api/work/other.js'
	export default {
		components: {
			uniDataSelect,
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				callMode: 1,
				query: {
					mark: '',
					containerCode: '',
					emptyType: '',
					from: '',
					missionType: 'warehouse',
					to: ''
				},
				missionTypeList: [
					{
						text: '库区',
						value: 'warehouse',
						disable: false
					},
					{
						text: '站点',
						value: 'point',
						disable: false
					}
				],
				range: [
					{
						text: '空车呼叫',
						value: 0
					},
					{
						text: '点对点叫车',
						value: 1
					},
					{
						text: '空Tray盘回流',
						value: 2
					}
				],
				scanFlag: false,
				emptyTypeList: [],
				fromList: [],
				// toList: [],
				toWarehouseList: [],
				toStieList: [],
				visible: false,
				timer: null,
				originalFromList: []
			};
		},
		mounted() {
			// this.fromList = this.originalFromList
			// 请求列表
			// this.getEmptyType()
			this.getStation()
		},
		methods: {
			async getEmptyType() {
				const res = await getEmptyTypeAPI()
				if (res.code === 200) {
					this.emptyTypeList = res.data
				}
			},
			async getFromList() {
				const res = await getFromListAPI()
				if (res.code === 200) {
					this.fromList = res.data
					
				}
			},
			async getToList() {
				const res = await getToListAPI()
				if (res.code === 200) {
					this.toList = res.data
				}
			},
			change(e) {
				console.log(e)
				if (e === 0) {
					// 请求空车类型
				} else if(e === 1) {
					// 请求起始、终点的点位列表
				} else if(e === 2) {
					// 请求起始、终点的点位列表
				}
				this.query = {
					mark: '',
					emptyType: '',
					from: '',
					to: ''
				}
			},
			reset() {
				this.query = {
				}
			},
			async emptyConfirm() {
				if (!this.query.emptyType) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请选择空车类型'
					})
				}
				if (this.query.emptyType && !this.query.mark) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描叫车点位'
					})
				}
				console.log('空车呼叫')
				const submit = {
					空车类型: this.query.emptyType,
					叫车点位: this.query.mark
				}
				const res = await emptyConfirmAPI()
				if (res.code === 200) {
					this.reset()
					this.$refs.uToast.show({
						type: 'success',
						message: res.message
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async pointConfirm() {
				if (this.scanFlag === true) {
					// 判断是否携带参数
					// 点对点叫车
					const submitForm = {
						rackCode: this.query.containerCode,
						srcCode: this.query.from,
						bindStatus: 'callCar',
						destCode: this.query.to,
						destType: this.query.missionType === 'warehouse' ? 'zone' : 'site'
					}
					const res = await threeMethodAPI(submitForm)
					if (res.code === 200) {
						this.$refs.uToast.show({
							type: 'success',
							message: res.message
						})
						this.resetPointToPoint()
					} else {
						return this.$refs.uToast.show({
							type: 'warning',
							message: res.message
						})
					}
				} else {
					// 判断是否携带参数
					// 绑定起始点位
					const submitForm = {
						rackCode: this.query.containerCode,
						srcCode: this.query.from,
						bindStatus: 'bind',
						destType: 'site'
					}
					const res = await threeMethodAPI(submitForm)
					if (res.code === 200) {
						this.$refs.uToast.show({
							type: 'success',
							message: res.message
						})
						// this.resetPointToPoint()
						// if (this.query.from.includes('-')) {
						// 	this.missionTypeList[0].disable = true
						// } else {
						// 	this.missionTypeList[1].disable = true
						// }
						this.scanFlag = true
					} else {
						return this.$refs.uToast.show({
							type: 'warning',
							message: res.message
						})
					}
				}
			},
			async trayConfirm() {
				if (!this.query.from) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请选择起始点位'
					})
				}
				if (this.query.from && !this.query.to) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描终点点位'
					})
				}
				console.log('空tray回流')
				const submitForm = {
					起始点位: this.query.from,
					终点点位: this.query.to
				}
				const res = await trayConfirmAPI()
				if (res.code === 200) {
					this.reset()
					this.$refs.uToast.show({
						type: 'success',
						message: res.message
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			missionChange() {
				if (this.query.missionType === 'warehouse') {
					this.originalFromList = this.toWarehouseList
					this.fromList = this.originalFromList
				} else {
					this.originalFromList = this.toStieList
					this.fromList = this.originalFromList
				}
			},
			focusInput() {
				if (this.fromList.length === 0) {
					return
				} else {
					this.visible = true
				}
			},
			clearInput() {
				this.query.from = ''
				this.fromList = this.originalFromList
			},
			clickItem(item) {
				if (Object.keys(item).length > 0) {
					this.query.from = item.value
					this.blurInput()
				}
			},
			blurInput() {
				this.clearTimer(this.timer)
				this.timer = setTimeout(() => {
					this.visible = false
				}, 500)
			},
			// directBlur() {
			// 	this.visible = false
			// },
			clearTimer(timer) {
				if (timer) {
					clearTimeout(timer)
				}
			},
			inputChange(e) {
				if (this.scanFlag === true) return
				if (!e) {
					this.fromList = this.originalFromList
				} else {
					this.fromList = this.originalFromList.filter(item =>
						item.text.includes(e)
					)
					if (this.fromList.length === 0) {
						this.visible = false
					} else {
						this.visible = true
					}
				}
			},
			async unBind() {
				const submitForm = {
					rackCode: this.query.containerCode,
					srcCode: this.query.from,
					bindStatus: 'unBind'
				}
				const res = await threeMethodAPI(submitForm)
				if (res.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: res.message
					})
					this.resetPointToPoint()
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			getLabel(missionType) {
				if (missionType === 'warehouse') {
					return '库区点位'
				} else if (missionType === 'point') {
					return '目的站点'
				} else {
					return '目的站点'
				}
			},
			async getContainerInfo() {
				if (!this.query.containerCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描载具码'
					})
				}
				// 成功之后才将scanFlag置为 true
				// this.scanFlag = true
				const submitForm = {
					rackCode: this.query.containerCode
				}
				const res = await getStationAPI(submitForm)
				if (res.code === 200) {
					if (res.data.currentSite) {
						this.scanFlag = true
						this.query.from = res.data.currentSite
					}
				}
			},
			resetPointToPoint() {
				this.query = {
					mark: '',
					containerCode: '',
					emptyType: '',
					from: '',
					missionType: 'warehouse',
					to: ''
				}
				this.scanFlag = false
				this.visible = false
				this.missionTypeList = [
					{
						text: '库区',
						value: 'warehouse',
						disable: false
					},
					{
						text: '站点',
						value: 'point',
						disable: false
					}
				]
				this.getStation()
			},
			async getStation() {
				const res = await getStationAPI()
				// console.log(res)
				if (res.code === 200) {
					// 库区列表
					this.toWarehouseList = res.data.zoneList.map(item => {
						return {
							text: item,
							value: item
						}
					})
					// 站点列表
					this.toStieList = res.data.siteList.map(item => {
						return {
							text: item,
							value: item
						}
					})
					this.originalFromList = this.toStieList
					this.fromList = this.originalFromList
				}
			},
			destinationChange() {
				
			}
		}
	}
</script>

<style lang="scss">
	// ::v-deep uni-view.u-form-item__body {
	// 	padding: 10rpx 0 !important;
	// }
	.commonButton {
		width: 100%;
		display: flex;
		gap: 20rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 15rpx;
		justify-content: space-between;
	}
	.people-item {
		height: 70rpx;
		line-height: 70rpx;
		overflow: hidden;
		padding: 0 15rpx;
	}
	
	.people-item:hover {
		background-color: #efefef; /* 鼠标悬停时的背景颜色 */
	}
</style>
